<template>
  <div class="calendar">
    <div class="header">
      <select v-model="selectedYear" @change="updateCalendar">
        <option v-for="year in yearOptions" :key="year" :value="year">{{ year }}年</option>
      </select>
      <select v-model="selectedMonth" @change="updateCalendar">
        <option v-for="(month, index) in monthOptions" :key="index" :value="index">{{ month }}</option>
      </select>
    </div>
    <div class="days">
      <div class="day" v-for="day in daysOfWeek" :key="day">{{ day }}</div>
    </div>
    <div class="dates">
      <div v-for="date in calendarDates" :key="date.date" @click="setSelectDate(date)"
        :class="['date', { 'other-month': date.month !== selectedMonth, 'today': isToday(date), 'marked': isMarked(date) }]">
        {{ date.day }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineProps } from 'vue';

function selectDate(date) {
  // 处理点击日期的事件
  console.log('Selected date:', date.date);
}

const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];

const props = defineProps({
  markedDates: {
    type: Array,
    default: () => [
      new Date(2025, 1, 1),
      new Date(2025, 1, 2),
      new Date(2025, 1, 3),
      new Date(2025, 1, 4),
      new Date(2025, 1, 5),
      new Date(2025, 1, 6),
    ]
  },
  setSelectDate: {
    type: Function,
    required: true,
  }
})

const currentDate = new Date();
const selectedYear = ref(currentDate.getFullYear());
const selectedMonth = ref(currentDate.getMonth());

// 年份选项：从当前年份往前推10年，往后推10年
const yearOptions = computed(() => {
  const currentYear = new Date().getFullYear();
  return Array.from({ length: 21 }, (_, i) => currentYear - 10 + i);
});

// 月份选项
const monthOptions = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];

// 获取当前月份的第一天是星期几
const firstDayOfMonth = computed(() => {
  return new Date(selectedYear.value, selectedMonth.value, 1).getDay();
});

// 获取当前月份的天数
const daysInMonth = computed(() => {
  return new Date(selectedYear.value, selectedMonth.value + 1, 0).getDate();
});

// 获取上个月的天数
const daysInLastMonth = computed(() => {
  return new Date(selectedYear.value, selectedMonth.value, 0).getDate();
});

// 生成日历日期数组
const calendarDates = computed(() => {
  const dates = [];
  let day = 1;

  // 上个月的日期
  for (let i = firstDayOfMonth.value - 1; i >= 0; i--) {
    dates.push({
      day: daysInLastMonth.value - i,
      month: selectedMonth.value - 1,
      date: new Date(selectedYear.value, selectedMonth.value - 1, daysInLastMonth.value - i),
    });
  }

  // 当前月份的日期
  for (let i = 1; i <= daysInMonth.value; i++) {
    dates.push({
      day: i,
      month: selectedMonth.value,
      date: new Date(selectedYear.value, selectedMonth.value, i),
    });
  }

  // 下个月的日期
  const nextMonthDays = 42 - dates.length; // 6行7列的日历
  for (let i = 1; i <= nextMonthDays; i++) {
    dates.push({
      day: i,
      month: selectedMonth.value + 1,
      date: new Date(selectedYear.value, selectedMonth.value + 1, i),
    });
  }

  return dates;
});

// 更新日历
const updateCalendar = () => {
  // 不需要做任何事情，因为计算属性会自动重新计算
};

// 判断是否为今天
const isToday = (date) => {
  const today = new Date();
  return (
    date.date.getDate() === today.getDate() &&
    date.date.getMonth() === today.getMonth() &&
    date.date.getFullYear() === today.getFullYear()
  );
};

// 判断是否为标记的日期
const isMarked = (date) => {
  return props.markedDates.some(
    (markedDate) =>
      markedDate.getFullYear() === date.date.getFullYear() &&
      markedDate.getMonth() === date.date.getMonth() &&
      markedDate.getDate() === date.date.getDate()
  );
};

</script>

<style scoped>
.calendar {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  /* background-color: rgba(0, 0, 0, 0.1); */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header select {
  padding: 5px;
  font-size: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.days,
.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.1rem;
}

.day {
  text-align: center;
  font-weight: bold;
  color: #333;
}

.date {
  text-align: center;
  /* height: 100px; */
  font-size: 0.5rem;
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s ease;
}

.other-month {
  color: #ccc;
}

.today {
  background-color: #4caf50;
  color: white;
}

.marked {
  background-color: #ff4d4d;
  color: white;
}

.date:hover {
  background-color: #e0e0e0;
}
</style>